<template>
  <div class="sidebar">
    <div class="logo">
      <div class="logo-icon">
        <i class="fas fa-robot"></i>
      </div>
      <span class="logo-text">AI测试平台</span>
    </div>
    
    <nav class="nav-menu">
      <a 
        v-for="item in navItems" 
        :key="item.id"
        href="#" 
        class="nav-item"
        :class="{ active: activeNav === item.id }"
        @click="setActiveNav(item.id)"
      >
        <div class="nav-icon">
          <i :class="item.icon"></i>
        </div>
        <span>{{ item.name }}</span>
      </a>
    </nav>
    
    <div class="sidebar-bottom">
      <div class="upgrade-illustration">
        <i class="fas fa-crown upgrade-icon"></i>
      </div>
      <button class="upgrade-btn">升级到专业版</button>
    </div>
  </div>
</template>

<script>
import { ref } from 'vue'

export default {
  name: 'Sidebar',
  setup() {
    const activeNav = ref('home')

    const navItems = [
      { id: 'home', name: '首页', icon: 'fas fa-home' },
      { id: 'interface', name: '接口管理', icon: 'fas fa-plug' },
      { id: 'automation', name: '自动化测试', icon: 'fas fa-cogs' },
      { id: 'functional', name: '功能用例', icon: 'fas fa-list-check' },
      { id: 'performance', name: '性能测试', icon: 'fas fa-tachometer-alt' },
      { id: 'config', name: '通用配置', icon: 'fas fa-sliders-h' },
      { id: 'system', name: '系统设置', icon: 'fas fa-cog' }
    ]

    const setActiveNav = (navId) => {
      activeNav.value = navId
    }

    return {
      activeNav,
      navItems,
      setActiveNav
    }
  }
}
</script>

<style scoped>
.sidebar {
  width: 220px;
  background: linear-gradient(180deg, #1e293b 0%, #334155 100%);
  color: white;
  padding: 20px 0;
  position: fixed;
  height: calc(100vh - 40px);
  overflow-y: auto;
  box-shadow: 2px 0 10px rgba(0,0,0,0.1);
}

.logo {
  display: flex;
  align-items: center;
  padding: 0 20px 30px;
  border-bottom: 1px solid #475569;
  margin-bottom: 20px;
}

.logo-icon {
  width: 32px;
  height: 32px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 10px;
}

.logo-icon i {
  font-size: 16px;
  color: white;
}

.logo-text {
  font-size: 16px;
  font-weight: 600;
}

.nav-menu {
  padding: 0 10px;
}

.nav-item {
  display: flex;
  align-items: center;
  padding: 10px 15px;
  margin-bottom: 4px;
  border-radius: 8px;
  color: #cbd5e1;
  text-decoration: none;
  transition: all 0.2s;
  font-size: 13px;
}

.nav-item:hover {
  background-color: rgba(255,255,255,0.1);
  color: white;
}

.nav-item.active {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}

.nav-icon {
  width: 16px;
  margin-right: 10px;
  text-align: center;
}

.sidebar-bottom {
  padding: 20px;
  text-align: center;
  position: absolute;
  bottom: 40px;
  left: 0;
  right: 0;
}

.upgrade-illustration {
  margin-bottom: 12px;
}

.upgrade-icon {
  font-size: 36px;
  color: #4f46e5;
}

.upgrade-btn {
  width: 100%;
  background: #4f46e5;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 6px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s ease;
  font-size: 12px;
}

.upgrade-btn:hover {
  background: #4338ca;
}

@media (max-width: 768px) {
  .sidebar {
    width: 60px;
  }
  
  .logo-text,
  .nav-item span {
    display: none;
  }
}
</style>